<template>
  <view class="index-page">
    <!-- 付款 -->
    <view class="hidden" v-if="status == 0">
      <view class="padding-lr-32 flex07 top">
        <view class="flex-right">
          <view class="font-28">付款给</view>
          <view class="font-36 font-bold margin-top-16">{{storeInfo.store_name}}</view>
        </view>
        <image :src="storeInfo.store_image" mode="aspectFill" class="img-128 border-r-4 margin-left-32"
          style="background-color: #ddd;"></image>
      </view>
      <view class="padding-lr-32">
        <view class="font-28">支付金额</view>
        <view class="flex01 margin-top-32">
          <view class="font-40 font-bold margin-right-32">¥</view>
          <input v-model="payload.price" type="digit" placeholder="请输入" placeholder-class="font-40 color-000-26"
            class="font-56 font-bold flex-right" />
        </view>
        <view class="border-b margin-top-32"></view>
      </view>
      <view class="padding-lr-32 margin-tb-48">
        <view class="s-btn2" @click="handleSubmit">支付</view>
      </view>
    </view>
    <!-- 付款成功 -->
    <view class="hidden text-c success" v-if="status == 1">
      <image src="/static/cheng@2x.png" class="img-128"></image>
      <view class="font-40 font-bold margin-top-32">¥{{payload.price}}</view>
      <view class="font-28 color-000-40 margin-top-8">支付成功</view>
    </view>
  </view>
</template>

<script>
  const {
    paymentApi,
    storeDetailApi
  } = require('@/api/')
  const app = getApp()

  export default {
    data() {
      return {
        status: 0,
        storeInfo: {
          store_name: '',
          store_image: ''
        },
        payload: {
          store_id: '',
          price: ''
        }
      }
    },
    onLoad(options) {
      this.status = 0
      this.payload.price = ''
    },
    onShow() {
      this.payload.store_id = uni.getStorageSync('store_id') || ''
      if (this.payload.store_id) {
        storeDetailApi({
          id: this.payload.store_id
        }).then(res => {
          this.storeInfo = res.data
        })
      } else {
        uni.showModal({
          content: '支付前，请先扫门店二维码',
          showCancel: false,
          confirmText: '我知道了'
        })
      }
    },
    methods: {
      handleSubmit() {
        if (this.payload.store_id === '') {
          uni.showModal({
            content: '支付前，请先扫门店二维码',
            showCancel: false,
            confirmText: '我知道了'
          })
          return
        }
        app.checkLogin((url) => {
          if (url) {
            uni.navigateTo({
              url,
            })
            return
          }
          const _this = this
          if (this.payload.price === '') {
            uni.showToast({
              icon: 'none',
              title: '请输入支付金额'
            })
            return
          }
          paymentApi(this.payload).then(res => {
            uni.requestPayment({
              provider: 'alipay',
              tradeNO: res.data.trade_no,
              success(resu) {
                console.log('resu ===>', resu)
                if (resu.resultCode === '9000') {
                  _this.status = 1
                } else {
                  uni.showToast({
                    icon: 'error',
                    title: resu?.memo || '支付失败'
                  })
                }
              },
              fail(err) {
                console.log('err ->>', err)
                uni.showToast({
                  icon: 'none',
                  title: JSON.stringify(err)
                })
              }
            })
          })
        })
      }
    }
  }
</script>

<style lang="less">
  .index-page {
    width: 100vw;
    min-height: 100vh;
    background-color: #fff;
  }

  .top {
    margin: 82rpx 0 112rpx;
  }

  .success {
    image {
      margin: 80rpx auto 0;
    }
  }
</style>